<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>

    <script>
        // 根据id名称获取元素
        var ele = document.getElementById('container')
        // 返回值：有对应id的元素，返回这个元素；没有对应id的元素，返回null
        console.log(ele)


        // 根据元素类名获取元素
        var ele = document.getElementsByClassName('box')
        // 返回值：有对应类名的元素，有多少获取多少；没有对应类名的元素，返回空的伪造数组
        console.log(ele)


        // 根据元素标签名获取元素
        var ele = document.getElementsByTagName('div')
        // 返回值：有对应标签名的元素，有多少获取多少；没有对应标签名的元素，返回空的伪造数组
        console.log(ele)


        // 根据选择器获取一个元素
        var ele = document.querySelector('div')
        // var ele = document.querySelector('.box')
        // var ele = document.querySelector('#container')
        // var ele = document.querySelector('#abc')
        // 返回值：有对应选择器的元素，获取到第一个；没有对应选择器的元素，返回null
        console.log(ele)


        // 根据选择器获取页面（一组）元素
        var ele = document.querySelectorAll('div')
        // var ele = document.querySelector('.box')
        // var ele = document.querySelector('#container')
        // var ele = document.querySelector('#abc')
        // 返回值：有对应选择器的元素，获取到第一个；没有对应选择器的元素，空的伪数组
        console.log(ele)
    </script>
</body>
</html>